<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Microsoft YaHei', sans-serif; }
        body { background-color: #f5f7fa; color: #333; padding: 20px; }
        .container { display: flex; max-width: 1200px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); overflow: hidden; min-height: 80vh; }
        .sidebar { width: 200px; background: #2c3e50; color: white; padding: 20px 0; }
        .sidebar-item { padding: 12px 20px; cursor: pointer; transition: background 0.3s; }
        .sidebar-item:hover { background: #34495e; }
        .sidebar-item.active { background: #3498db; }
        .shop-list { padding-left: 20px; }
        .shop-item { padding: 8px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .shop-item:hover { background: #34495e; }
        .shop-actions { display: flex; gap: 5px; }
        .shop-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 12px; }
        .shop-btn:hover { color: white; }
        .main-content { flex: 1; padding: 20px; }
        .page { display: none; }
        .page.active { display: block; }
        .page-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        .task-form { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; align-items: center; }
        .task-form input, .task-form select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; height: 40px; }
        .task-input { flex: 2; min-width: 200px; }
        .task-date, .task-time, .task-priority { flex: 1; min-width: 120px; }
        .add-btn { padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; height: 40px; }
        .quick-tasks { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        .quick-btn { padding: 8px 16px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .task-list { margin-bottom: 30px; }
        .task-item { display: flex; align-items: center; padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid #ff9800; height: 50px; }
        .task-item.completed { background: #e8f5e9; }
        .task-info { flex: 1; overflow: hidden; }
        .task-title { font-weight: bold; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .task-datetime { color: #666; font-size: 11px; }
        .countdown { min-width: 120px; text-align: center; padding: 0 10px; font-weight: bold; font-size: 12px; color: #4CAF50; }
        .countdown.warning { color: #FFC107; }
        .countdown.urgent { color: #f44336; }
        .task-actions { display: flex; gap: 6px; }
        .action-btn { padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 11px; }
        .edit-btn { background: #ffc107; color: black; }
        .delete-btn { background: #f44336; color: white; }
        .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 15px; }
        .template-table { display: table; width: 100%; border-collapse: collapse; margin-top: 15px; }
        .template-row { display: table-row; }
        .template-cell { display: table-cell; padding: 8px; border: 1px solid #ddd; text-align: center; }
        .template-header { font-weight: bold; background-color: #f5f7fa; }
        .data-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .data-table th, .data-table td { border: 1px solid #ddd; padding: 10px; text-align: center; }
        .data-table th { background-color: #f5f7fa; }
        .data-table tr:hover { background-color: #f9f9f9; }
        .total-row { font-weight: bold; background-color: #e8f5e9; }
        .shop-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 15px; flex-wrap: wrap; }
        .shop-tab { padding: 8px 15px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 14px; }
        .shop-tab.active { border-bottom-color: #2196F3; color: #2196F3; font-weight: bold; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; }
        .modal-content { background: white; padding: 20px; border-radius: 8px; width: 300px; }
        .modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
        .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
        .calendar-day { padding: 10px; text-align: center; border: 1px solid #ddd; border-radius: 4px; }
        .calendar-day.empty { background-color: #f9f9f9; }
        .calendar-day.has-data { color: #4CAF50; font-weight: bold; }
        .view-all-btn { padding: 8px 16px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-item active" data-page="tasks">所有任务</div>
            <div class="sidebar-item" data-page="today">今天</div>
            <div class="sidebar-item" data-page="incomplete">未完成</div>
            <div class="sidebar-item" data-page="shops" id="shopsSidebarItem">店铺</div>
            <div class="shop-list" id="shopList"></div>
            <div class="sidebar-item" data-page="templates">模板</div>
        </div>
        
        <div class="main-content">
            <div class="page active" id="tasksPage">
                <div class="task-form">
                    <input type="text" class="task-input task-name" placeholder="任务名称">
                    <input type="date" class="task-date">
                    <input type="time" class="task-time" value="23:59">
                    <select class="task-priority">
                        <option value="orange">一般</option>
                        <option value="red">重要</option>
                        <option value="blue">紧急</option>
                    </select>
                    <button class="add-btn">添加任务</button>
                </div>
                
                <div class="quick-tasks">
                    <button class="quick-btn" data-type="check">检查店铺</button>
                    <button class="quick-btn" data-type="order">处理订单</button>
                    <button class="quick-btn" data-type="design">作图</button>
                    <button class="quick-btn" data-type="template">写模板</button>
                    <button class="quick-btn" data-type="upload">上传产品</button>
                </div>
                
                <div class="task-list" id="taskList"></div>
            </div>
            
            <div class="page" id="templatesPage">
                <div class="page-header">
                    <h2>模板管理</h2>
                </div>
                
                <div class="shop-tabs" id="templateShopTabs"></div>
                
                <div class="template-table">
                    <div class="template-row" id="templateTableHeader"></div>
                    <div class="template-row" id="templateTableContent"></div>
                </div>
            </div>
            
            <div class="page" id="shopsPage">
                <div class="page-header">
                    <h2>所有店铺数据统计</h2>
                    <button class="view-all-btn" id="viewAllDatesBtn">查看全部日期</button>
                </div>
                
                <div id="shopsDataContent"></div>
            </div>
            
            <div class="page" id="shopDetailPage">
                <div class="page-header">
                    <h2 id="shopDetailTitle">店铺数据统计</h2>
                </div>
                
                <div id="shopDataContent"></div>
            </div>
            
            <div class="page" id="calendarPage">
                <div class="page-header">
                    <h2>所有日期数据统计</h2>
                    <button class="view-all-btn" id="backToShopsBtn">返回店铺统计</button>
                </div>
                
                <div id="calendarContent"></div>
            </div>
        </div>
    </div>

    <div class="modal" id="addShopModal">
        <div class="modal-content">
            <h3>添加店铺</h3>
            <input type="text" id="shopNameInput" placeholder="输入店铺名称">
            <div class="modal-buttons">
                <button id="cancelAddShop">取消</button>
                <button id="confirmAddShop">确认</button>
            </div>
        </div>
    </div>

    <div class="modal" id="editShopModal">
        <div class="modal-content">
            <h3>编辑店铺</h3>
            <input type="text" id="editShopNameInput" placeholder="输入店铺名称">
            <div class="modal-buttons">
                <button id="cancelEditShop">取消</button>
                <button id="confirmEditShop">确认</button>
            </div>
        </div>
    </div>

    <div class="modal" id="quickTaskModal">
        <div class="modal-content">
            <h3 id="quickTaskTitle"></h3>
            <div id="quickTaskContent"></div>
            <div class="modal-buttons">
                <button id="cancelQuickTask">取消</button>
                <button id="confirmQuickTask">确认</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            let shops = JSON.parse(localStorage.getItem('shops')) || [
                { id: 1, name: 'US01' },
                { id: 2, name: 'US02' },
                { id: 3, name: 'US03' }
            ];
            let currentShopId = null;
            let editingShopId = null;
            let quickTaskType = '';
            let currentPage = 'tasks';
            
            const today = new Date();
            const formattedDate = today.toISOString().substr(0, 10);
            document.querySelector('.task-date').value = formattedDate;
            
            checkAndAddDailyTasks();
            
            renderShops();
            renderTasks();
            setupEventListeners();
            
            function checkAndAddDailyTasks() {
                const today = new Date();
                const todayStr = today.toISOString().substr(0, 10);
                const lastAutoTaskDate = localStorage.getItem('lastAutoTaskDate');
                
                if (lastAutoTaskDate === todayStr) return;
                
                const orderTask = {
                    id: Date.now(),
                    name: '导订单任务',
                    date: todayStr,
                    time: '23:59',
                    priority: 'orange',
                    completed: false,
                    completedTime: null,
                    isAutoTask: true
                };
                
                const checkTask = {
                    id: Date.now() + 1,
                    name: '检查店铺任务',
                    date: todayStr,
                    time: '23:59',
                    priority: 'orange',
                    completed: false,
                    completedTime: null,
                    isAutoTask: true
                };
                
                const hasOrderTask = tasks.some(task => 
                    task.name === '导订单任务' && 
                    task.date === todayStr && 
                    task.isAutoTask
                );
                
                const hasCheckTask = tasks.some(task => 
                    task.name === '检查店铺任务' && 
                    task.date === todayStr && 
                    task.isAutoTask
                );
                
                if (!hasOrderTask) tasks.push(orderTask);
                if (!hasCheckTask) tasks.push(checkTask);
                
                localStorage.setItem('lastAutoTaskDate', todayStr);
                saveTasks();
            }
            
            function renderShops() {
                const shopList = document.getElementById('shopList');
                shopList.innerHTML = '';
                
                shops.forEach(shop => {
                    const shopItem = document.createElement('div');
                    shopItem.className = 'shop-item';
                    shopItem.dataset.id = shop.id;
                    
                    shopItem.innerHTML = `
                        <span>${shop.name}</span>
                        <div class="shop-actions">
                            <button class="shop-btn edit-shop">编辑</button>
                            <button class="shop-btn delete-shop">删除</button>
                        </div>
                    `;
                    
                    shopList.appendChild(shopItem);
                });
            }
            
            function renderTasks() {
                const taskList = document.getElementById('taskList');
                taskList.innerHTML = '';
                
                if (tasks.length === 0) {
                    taskList.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">暂无任务</div>';
                    return;
                }
                
                tasks.forEach(task => {
                    const taskItem = document.createElement('div');
                    taskItem.className = `task-item ${task.completed ? 'completed' : ''}`;
                    taskItem.dataset.id = task.id;
                    
                    const priorityColor = 
                        task.priority === 'orange' ? '#ff9800' : 
                        task.priority === 'red' ? '#f44336' : '#2196f3';
                    taskItem.style.borderLeftColor = priorityColor;
                    
                    let timeDisplay = '';
                    let countdownClass = '';
                    
                    if (task.completed) {
                        const completedDate = new Date(task.completedTime);
                        timeDisplay = `完成于: ${completedDate.toLocaleString()}`;
                    } else {
                        const taskDateTime = new Date(`${task.date}T${task.time}`);
                        const now = new Date();
                        const diffMs = taskDateTime - now;
                        
                        if (diffMs <= 0) {
                            timeDisplay = '已过期';
                            countdownClass = 'urgent';
                        } else {
                            const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                            const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                            const mins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                            
                            timeDisplay = `剩余: ${days}天 ${hours}小时 ${mins}分钟`;
                            
                            if (diffMs < 3 * 60 * 60 * 1000) countdownClass = 'warning';
                        }
                    }
                    
                    taskItem.innerHTML = `
                        <div class="task-info">
                            <div class="task-title">${task.name}</div>
                            <div class="task-datetime">${task.date} ${task.time}</div>
                        </div>
                        <div class="countdown ${countdownClass}">${timeDisplay}</div>
                        <div class="task-actions">
                            <button class="action-btn edit-btn">编辑</button>
                            <button class="action-btn delete-btn">删除</button>
                        </div>
                    `;
                    
                    taskItem.addEventListener('click', function(e) {
                        if (!e.target.classList.contains('edit-btn') && 
                            !e.target.classList.contains('delete-btn')) {
                            toggleTaskStatus(task.id);
                        }
                    });
                    
                    taskItem.querySelector('.edit-btn').addEventListener('click', function(e) {
                        e.stopPropagation();
                        alert('编辑功能将在后续版本实现');
                    });
                    
                    taskItem.querySelector('.delete-btn').addEventListener('click', function(e) {
                        e.stopPropagation();
                        deleteTask(task.id);
                    });
                    
                    taskList.appendChild(taskItem);
                });
            }
            
            function setupEventListeners() {
                document.querySelector('.add-btn').addEventListener('click', addTask);
                
                document.querySelectorAll('.sidebar-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const page = this.dataset.page;
                        navigateToPage(page);
                    });
                });
                
                document.getElementById('shopsSidebarItem').addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    document.getElementById('addShopModal').style.display = 'flex';
                });
                
                document.addEventListener('click', function(e) {
                    if (e.target.closest('.shop-item')) {
                        const shopItem = e.target.closest('.shop-item');
                        const shopId = parseInt(shopItem.dataset.id);
                        const shop = shops.find(s => s.id === shopId);
                        
                        if (shop) showShopDetail(shop);
                    }
                    
                    if (e.target.classList.contains('edit-shop')) {
                        const shopItem = e.target.closest('.shop-item');
                        editingShopId = parseInt(shopItem.dataset.id);
                        const shop = shops.find(s => s.id === editingShopId);
                        document.getElementById('editShopNameInput').value = shop.name;
                        document.getElementById('editShopModal').style.display = 'flex';
                    }
                    
                    if (e.target.classList.contains('delete-shop')) {
                        const shopItem = e.target.closest('.shop-item');
                        const shopId = parseInt(shopItem.dataset.id);
                        if (confirm('确定要删除这个店铺吗？')) deleteShop(shopId);
                    }
                });
                
                document.querySelectorAll('.quick-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        quickTaskType = this.dataset.type;
                        showQuickTaskModal(quickTaskType);
                    });
                });
                
                document.getElementById('cancelAddShop').addEventListener('click', function() {
                    document.getElementById('addShopModal').style.display = 'none';
                });
                
                document.getElementById('confirmAddShop').addEventListener('click', function() {
                    const shopName = document.getElementById('shopNameInput').value.trim();
                    if (shopName) {
                        addShop(shopName);
                        document.getElementById('addShopModal').style.display = 'none';
                        document.getElementById('shopNameInput').value = '';
                    }
                });
                
                document.getElementById('cancelEditShop').addEventListener('click', function() {
                    document.getElementById('editShopModal').style.display = 'none';
                });
                
                document.getElementById('confirmEditShop').addEventListener('click', function() {
                    const shopName = document.getElementById('editShopNameInput').value.trim();
                    if (shopName) {
                        editShop(editingShopId, shopName);
                        document.getElementById('editShopModal').style.display = 'none';
                    }
                });
                
                document.getElementById('cancelQuickTask').addEventListener('click', function() {
                    document.getElementById('quickTaskModal').style.display = 'none';
                });
                
                document.getElementById('confirmQuickTask').addEventListener('click', function() {
                    createQuickTask(quickTaskType);
                    document.getElementById('quickTaskModal').style.display = 'none';
                });
                
                document.getElementById('viewAllDatesBtn').addEventListener('click', function() {
                    navigateToPage('calendar');
                    renderCalendar();
                });
                
                document.getElementById('backToShopsBtn').addEventListener('click', function() {
                    navigateToPage('shops');
                });
            }
            
            function navigateToPage(page) {
                document.querySelectorAll('.sidebar-item').forEach(item => {
                    item.classList.remove('active');
                });
                document.querySelector(`[data-page="${page}"]`).classList.add('active');
                
                document.querySelectorAll('.page').forEach(pageEl => {
                    pageEl.classList.remove('active');
                });
                
                if (page === 'templates') {
                    document.getElementById('templatesPage').classList.add('active');
                    renderTemplates();
                } else if (page === 'shops') {
                    document.getElementById('shopsPage').classList.add('active');
                    renderShopsData();
                } else if (page === 'calendar') {
                    document.getElementById('calendarPage').classList.add('active');
                } else {
                    document.getElementById('tasksPage').classList.add('active');
                    
                    let filteredTasks = tasks;
                    if (page === 'today') {
                        const today = new Date().toISOString().substr(0, 10);
                        filteredTasks = tasks.filter(task => task.date === today);
                    } else if (page === 'incomplete') {
                        filteredTasks = tasks.filter(task => !task.completed);
                    }
                    
                    const originalTasks = tasks;
                    tasks = filteredTasks;
                    renderTasks();
                    tasks = originalTasks;
                }
                
                currentPage = page;
            }
            
            function showShopDetail(shop) {
                document.querySelectorAll('.page').forEach(pageEl => {
                    pageEl.classList.remove('active');
                });
                
                document.getElementById('shopDetailPage').classList.add('active');
                document.getElementById('shopDetailTitle').textContent = `${shop.name} 数据统计`;
                
                renderShopData(shop);
            }
            
            function renderShopsData() {
                const content = document.getElementById('shopsDataContent');
                content.innerHTML = '';
                
                const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                const weekDates = getWeekDates();
                
                let html = `
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>店铺</th>
                `;
                
                weekDates.forEach((date, index) => {
                    html += `<th>${weekDays[index]}</th>`;
                });
                
                html += `
                                <th>上传总计</th>
                                <th>模板总计</th>
                                <th>作图总计</th>
                                <th>全部总计</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                shops.forEach(shop => {
                    html += `<tr><td>${shop.name}</td>`;
                    
                    let uploadTotal = 0;
                    let templateTotal = 0;
                    let designTotal = 0;
                    
                    weekDates.forEach(date => {
                        const dayData = calculateShopData(shop, date);
                        html += `<td>上传: ${dayData.upload}<br>模板: ${dayData.template}<br>作图: ${dayData.design}</td>`;
                        uploadTotal += dayData.upload;
                        templateTotal += dayData.template;
                        designTotal += dayData.design;
                    });
                    
                    const weekTotal = uploadTotal + templateTotal + designTotal;
                    html += `<td class="total-row">${uploadTotal}</td>`;
                    html += `<td class="total-row">${templateTotal}</td>`;
                    html += `<td class="total-row">${designTotal}</td>`;
                    html += `<td class="total-row">${weekTotal}</td></tr>`;
                });
                
                html += `
                            <tr class="total-row">
                                <td>总计</td>
                `;
                
                let grandUploadTotal = 0;
                let grandTemplateTotal = 0;
                let grandDesignTotal = 0;
                
                weekDates.forEach(date => {
                    let dayUploadTotal = 0;
                    let dayTemplateTotal = 0;
                    let dayDesignTotal = 0;
                    
                    shops.forEach(shop => {
                        const dayData = calculateShopData(shop, date);
                        dayUploadTotal += dayData.upload;
                        dayTemplateTotal += dayData.template;
                        dayDesignTotal += dayData.design;
                    });
                    
                    const dayTotal = dayUploadTotal + dayTemplateTotal + dayDesignTotal;
                    html += `<td>${dayTotal}</td>`;
                    grandUploadTotal += dayUploadTotal;
                    grandTemplateTotal += dayTemplateTotal;
                    grandDesignTotal += dayDesignTotal;
                });
                
                const grandTotal = grandUploadTotal + grandTemplateTotal + grandDesignTotal;
                html += `<td>${grandUploadTotal}</td>`;
                html += `<td>${grandTemplateTotal}</td>`;
                html += `<td>${grandDesignTotal}</td>`;
                html += `<td>${grandTotal}</td></tr>`;
                
                html += `
                        </tbody>
                    </table>
                `;
                
                content.innerHTML = html;
            }
            
            function renderShopData(shop) {
                const content = document.getElementById('shopDataContent');
                content.innerHTML = '';
                
                const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                const weekDates = getWeekDates();
                
                let html = `
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>星期</th>
                                <th>上传产品数</th>
                                <th>写模板数量</th>
                                <th>作图数量</th>
                                <th>每日总计</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                let uploadTotal = 0;
                let templateTotal = 0;
                let designTotal = 0;
                let weekTotal = 0;
                
                weekDates.forEach((date, index) => {
                    const dayData = calculateShopData(shop, date);
                    const dayTotal = dayData.upload + dayData.template + dayData.design;
                    
                    html += `
                        <tr>
                            <td>${weekDays[index]}</td>
                            <td>${dayData.upload}</td>
                            <td>${dayData.template}</td>
                            <td>${dayData.design}</td>
                            <td>${dayTotal}</td>
                        </tr>
                    `;
                    
                    uploadTotal += dayData.upload;
                    templateTotal += dayData.template;
                    designTotal += dayData.design;
                    weekTotal += dayTotal;
                });
                
                html += `
                        <tr class="total-row">
                            <td>本周总计</td>
                            <td>${uploadTotal}</td>
                            <td>${templateTotal}</td>
                            <td>${designTotal}</td>
                            <td>${weekTotal}</td>
                        </tr>
                    </tbody>
                </table>
                `;
                
                content.innerHTML = html;
            }
            
            function calculateShopData(shop, date) {
                const shopTasks = tasks.filter(task => 
                    task.completed && 
                    task.date === date &&
                    task.name.includes(shop.name)
                );
                
                let uploadCount = 0;
                let templateCount = 0;
                let designCount = 0;
                
                shopTasks.forEach(task => {
                    if (task.name.includes('上传')) uploadCount++;
                    else if (task.name.includes('写模板')) templateCount++;
                    else if (task.name.includes('作图')) {
                        const match = task.name.match(/作图(\d+)个/);
                        if (match && match[1]) designCount += parseInt(match[1]);
                        else designCount++;
                    }
                });
                
                return { upload: uploadCount, template: templateCount, design: designCount };
            }
            
            function getWeekDates() {
                const today = new Date();
                const dayOfWeek = today.getDay();
                const startDate = new Date(today);
                
                startDate.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
                
                const dates = [];
                for (let i = 0; i < 7; i++) {
                    const date = new Date(startDate);
                    date.setDate(startDate.getDate() + i);
                    dates.push(date.toISOString().substr(0, 10));
                }
                
                return dates;
            }
            
            function renderTemplates() {
                const header = document.getElementById('templateTableHeader');
                const content = document.getElementById('templateTableContent');
                header.innerHTML = '';
                content.innerHTML = '';
                
                shops.forEach(shop => {
                    const headerCell = document.createElement('div');
                    headerCell.className = 'template-cell template-header';
                    headerCell.textContent = shop.name;
                    header.appendChild(headerCell);
                    
                    const contentCell = document.createElement('div');
                    contentCell.className = 'template-cell';
                    
                    const shopTemplates = tasks.filter(task => 
                        task.completed && 
                        task.name.includes('写模板') &&
                        task.name.includes(shop.name)
                    );
                    
                    if (shopTemplates.length > 0) {
                        const templateList = document.createElement('ul');
                        templateList.style.listStyleType = 'none';
                        templateList.style.padding = '0';
                        templateList.style.margin = '0';
                        
                        shopTemplates.forEach(task => {
                            const templateName = task.name.split('写模板')[1] || task.name;
                            const listItem = document.createElement('li');
                            listItem.textContent = templateName;
                            listItem.style.marginBottom = '5px';
                            templateList.appendChild(listItem);
                        });
                        
                        contentCell.appendChild(templateList);
                    } else {
                        contentCell.textContent = '暂无模板';
                        contentCell.style.color = '#666';
                    }
                    
                    content.appendChild(contentCell);
                });
            }
            
            function renderCalendar() {
                const content = document.getElementById('calendarContent');
                content.innerHTML = '<h3>日历视图 - 开发中</h3><p>这里将显示所有日期的数据，以日历形式呈现</p>';
                
                // 这里可以扩展实现完整的日历功能
                // 目前仅提供基本框架
            }
            
            function showQuickTaskModal(type) {
                const modal = document.getElementById('quickTaskModal');
                const title = document.getElementById('quickTaskTitle');
                const content = document.getElementById('quickTaskContent');
                
                content.innerHTML = '';
                
                switch(type) {
                    case 'check':
                    case 'order':
                        title.textContent = type === 'check' ? '检查店铺' : '处理订单';
                        content.innerHTML = '<p>将创建一个已完成的任务</p>';
                        break;
                    case 'design':
                        title.textContent = '作图';
                        content.innerHTML = `
                            <p>请输入数量：</p>
                            <input type="number" id="designCount" min="1" value="1">
                        `;
                        break;
                    case 'template':
                        title.textContent = '写模板';
                        if (shops.length === 0) {
                            content.innerHTML = '<p>请先添加店铺</p>';
                        } else {
                            content.innerHTML = `
                                <p>选择店铺：</p>
                                <select id="templateShop">
                                    ${shops.map(shop => `<option value="${shop.id}">${shop.name}</option>`).join('')}
                                </select>
                                <p>模板名称：</p>
                                <input type="text" id="templateName" placeholder="输入模板名称">
                            `;
                        }
                        break;
                    case 'upload':
                        title.textContent = '上传产品';
                        if (shops.length === 0) {
                            content.innerHTML = '<p>请先添加店铺</p>';
                        } else {
                            content.innerHTML = `
                                <p>选择店铺：</p>
                                <select id="uploadShop">
                                    ${shops.map(shop => `<option value="${shop.id}">${shop.name}</option>`).join('')}
                                </select>
                                <p>SKU数量：</p>
                                <input type="number" id="uploadCount" min="1" value="1">
                            `;
                        }
                        break;
                }
                
                modal.style.display = 'flex';
            }
            
            function createQuickTask(type) {
                const now = new Date();
                const nowDate = now.toISOString().substr(0, 10);
                const nowTime = now.toTimeString().substr(0, 5);
                
                let taskName = '';
                let priority = 'orange';
                
                switch(type) {
                    case 'check':
                        taskName = '检查店铺';
                        break;
                    case 'order':
                        taskName = '处理订单';
                        break;
                    case 'design':
                        const designCount = document.getElementById('designCount').value;
                        taskName = `作图${designCount}个`;
                        priority = 'blue';
                        break;
                    case 'template':
                        const templateShopId = document.getElementById('templateShop').value;
                        const templateName = document.getElementById('templateName').value;
                        const templateShop = shops.find(shop => shop.id == templateShopId);
                        taskName = `为${templateShop.name}写模板${templateName}`;
                        priority = 'blue';
                        break;
                    case 'upload':
                        const uploadShopId = document.getElementById('uploadShop').value;
                        const uploadCount = document.getElementById('uploadCount').value;
                        const uploadShop = shops.find(shop => shop.id == uploadShopId);
                        taskName = `为${uploadShop.name}上传${uploadCount}个产品`;
                        priority = 'blue';
                        break;
                }
                
                const newTask = {
                    id: Date.now(),
                    name: taskName,
                    date: nowDate,
                    time: nowTime,
                    priority: priority,
                    completed: true,
                    completedTime: now.toISOString()
                };
                
                tasks.push(newTask);
                saveTasks();
                renderTasks();
            }
            
            function addTask() {
                const taskName = document.querySelector('.task-name').value.trim();
                const taskDate = document.querySelector('.task-date').value;
                const taskTime = document.querySelector('.task-time').value;
                const taskPriority = document.querySelector('.task-priority').value;
                
                if (!taskName || !taskDate || !taskTime) {
                    alert('请填写完整的任务信息！');
                    return;
                }
                
                const newTask = {
                    id: Date.now(),
                    name: taskName,
                    date: taskDate,
                    time: taskTime,
                    priority: taskPriority,
                    completed: false,
                    completedTime: null
                };
                
                tasks.push(newTask);
                saveTasks();
                renderTasks();
                
                document.querySelector('.task-name').value = '';
            }
            
            function toggleTaskStatus(taskId) {
                tasks = tasks.map(task => {
                    if (task.id === taskId) {
                        return {
                            ...task,
                            completed: !task.completed,
                            completedTime: task.completed ? null : new Date().toISOString()
                        };
                    }
                    return task;
                });
                
                saveTasks();
                renderTasks();
            }
            
            function deleteTask(taskId) {
                if (confirm('确定要删除这个任务吗？')) {
                    tasks = tasks.filter(task => task.id !== taskId);
                    saveTasks();
                    renderTasks();
                }
            }
            
            function addShop(name) {
                const newShop = {
                    id: Date.now(),
                    name: name
                };
                
                shops.push(newShop);
                saveShops();
                renderShops();
                
                if (currentPage === 'shops') renderShopsData();
            }
            
            function editShop(shopId, name) {
                shops = shops.map(shop => {
                    if (shop.id === shopId) {
                        return { ...shop, name: name };
                    }
                    return shop;
                });
                
                saveShops();
                renderShops();
                
                if (currentPage === 'shops') renderShopsData();
            }
            
            function deleteShop(shopId) {
                shops = shops.filter(shop => shop.id !== shopId);
                saveShops();
                renderShops();
                
                if (currentPage === 'shops') renderShopsData();
            }
            
            function saveTasks() {
                localStorage.setItem('tasks', JSON.stringify(tasks));
            }
            
            function saveShops() {
                localStorage.setItem('shops', JSON.stringify(shops));
            }
        });
    </script>
</body>
</html>